<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;list-style: none;}
			.clearfix:after{content: "";clear: both;display: block;}
			li{width: 100px;height:30px;text-align: center;line-height: 30px;border: 1px solid #000;float: left;}
			p{width: 300px;height:300px;border:1px solid #000;text-align: center;line-height: 300px;display: none;}
			.active{background:blue;}
			.show{display: block;}
		</style>
		<script type="text/javascript">
			function tabFn(str){
				this.oPar=document.querySelector(str)
				this.aBtn=this.oPar.querySelectorAll('li')
				this.list=this.oPar.querySelectorAll('p')
				var _this=this;
				for(var i=0;i<this.aBtn.length;i++){
					this.aBtn[i].index=i;
					this.aBtn[i].onclick=function(){
						_this.change(this.index)
					}
				}
			}
			tabFn.prototype.change=function(a){
				for(var i=0;i<this.aBtn.length;i++){
					this.aBtn[i].className=""
					this.list[i].className=""
				}
				this.list[a].className="show"
				this.aBtn[a].className="active"
			}
		</script>
	</head>
	<body>
		<div class="tab" id="tab1">
			<ul class="clearfix">
				<li class="active">选项一</li>
				<li>选项二</li>
				<li>选项三</li>
			</ul>
			<p class="show">内容一</p>
			<p>内容二</p>
			<p>内容三</p>
		</div>
	</body>
	<script>
		var tab1=new tabFn("#tab1")
	</script>
</html>
